<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DefinePropertyDemo</title>
    <script src="compile.js"></script>
    <script src="kvue.js"></script>
</head>
<body>
    <div id="app">
        <p id="name"></p>
        <p>
            <div>{{name}}</div>
            <div>{{age}}</div>
            <div>{{sex}}</div>
            <p k-text="name"></p>
            <p>
                <input type="text" name="school" id="school" k-model="school">
            </p>
            <button @click="changeName">change name</button>
        </p>
        <p>
            <h3>kvue:</h3>
            <p id="test"></p>
            <p id="foo"></p>
            <p>
                <button onclick="changeData()">change data</button>
            </p>
        </p>
    </div>

    <script>
        var vue = new KVue({
            el: '#app',
            data: {
                name: '俄勒冈',
                age: 18,
                sex: 'male',
                test: 'This is a test data',
                school: 'A high school.',
                foo: {
                    bar: 'This is bar.'
                },
                list: [1,2,3]
            },
            created() {
                console.log('start.....')
                setTimeout(() => {
                    this.name = '阿里封疆大吏风景'
                }, 2000);
            },
            methods: {
                changeName() {
                    this.name = "再来一次改变吧"
                    this.age = 28
                }
            }
        });
        showVueData();
        function changeData() {
            vue.$data.test = 'change test data'
            vue.$data.foo.bar = 'change bar data'
            showVueData();
        }
        function showVueData() {
            document.querySelector("#test").innerHTML = vue.$data.test
            document.querySelector("#foo").innerHTML = vue.$data.foo.bar
        }
    </script>
</body>
</html>